<template>
  <div class="container">
    <!-- 新增试题按钮-->
    <el-row justify="space-between" type="flex">
      <span class="caption">说明：目前支持学科和关键字条件筛选</span>
      <el-button class="addQuestion" icon="el-icon-edit" size="small" type="success"
                 @click="$router.push('/questions/new')">新增试题
      </el-button>
    </el-row>
    <!--  表单区域-->
    <el-form ref="form" :model="form">
      <el-row class="row-bg" type="flex">
        <el-col :span="6">
          <el-form-item label="学科" label-width="80px">
            <el-select v-model="form.subjectID" placeholder="请选择" @change="changeSubject">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" label-width="80px">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                v-for="item in directoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" label-width="80px">
            <el-select v-model="form.tags" placeholder="请选择">
              <el-option
                v-for="item in tagsList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" label-width="80px">
            <el-input v-model="form.keyword" placeholder="根据题干搜索"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="6">
          <el-form-item label="试题类型" label-width="80px">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" label-width="80px">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" label-width="80px">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option value="o2o"></el-option>
              <el-option value="外包服务"></el-option>
              <el-option value="企业服务"></el-option>
              <el-option value="互联网金融"></el-option>
              <el-option value="企业咨询"></el-option>
              <el-option value="互联网"></el-option>
              <el-option value="电子商务"></el-option>
              <el-option value="其他"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" label-width="80px">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="6">
          <el-form-item label="题目备注" label-width="80px">
            <el-input v-model="form.remarks"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" label-width="80px">
            <el-input v-model="form.shortName"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" label-width="80px">
            <el-select v-model="form.province" class="city-select" placeholder="请选择" @change="cityChange">
              <el-option
                v-for="item in cityList"
                :key="item"
                :value="item"
              />
            </el-select>
            <el-select v-model="form.city" class="city-select" placeholder="请选择">
              <el-option
                v-for="item in areaList"
                :key="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="btn-container">
            <el-button size="small" @click="clearForm">清除</el-button>
            <el-button size="small" type="primary" @click="onSearch">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { subjectsSimple } from '@/api/hmmm/subjects'
import { directorySimple } from '@/api/hmmm/directorys'
import { tagsSimple } from '@/api/hmmm/tags'
import { simple as usersSimple } from '@/api/base/users'
import { citys, provinces } from '@/api/hmmm/citys'

export default {
  name: 'QuestionsScreen',
  data () {
    return {
      form: {},
      subjectList: [],
      directoryList: [],
      tagsList: [],
      userList: [],
      cityList: [],
      areaList: []
    }
  },
  created () {
    this.loadSubjects()
  },
  methods: {
    // 获取学科列表
    async loadSubjects () {
      const res = await subjectsSimple()
      this.subjectList = res.data
      // 获取用户列表
      this.userList = (await usersSimple()).data
    },
    // 当学科下拉框发生变化时触发
    changeSubject () {
      this.loadDirectorySimple()
    },
    // 获取二级列表  // 获取标签列表
    async loadDirectorySimple () {
      const res = await directorySimple({ subjectID: this.form.subjectID })
      this.directoryList = res.data
      const res1 = await tagsSimple({ subjectID: this.form.subjectID })
      this.tagsList = res1.data
      // 获取城市列表
      this.cityList = provinces()
    },
    // 城市
    cityChange () {
      this.areaList = citys(this.form.province)
      this.form.city = this.areaList[0]
    },
    // 清除表单
    async clearForm () {
      await Object.assign(this.$data, this.$options.data())
      await this.loadSubjects()
      await this.$emit('search', this.form)
    },
    // 点击搜索
    onSearch () {
      this.$emit('search', this.form)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  .caption {
    font-size: 12px;
    color: pink;
  }

  .addQuestion {
    margin-bottom: 15px;
  }

  .el-select {
    display: block;
  }

  .city-select {
    display: inline-block;
    width: 48%;
    margin-right: 2%;
  }

  .btn-container {
    display: flex;
    justify-content: flex-end;
  }
}

</style>
